<template>
   
   <div>
        <div class="shop_box">
            <dl class="shop clearfix"  v-for="item in list" :key="item.id">
                <dt><img src="" alt=""></dt>
                <dd>
                    <h3>{{item.name}}</h3>
                    <p>积分：{{item.price}}</p>
                    <p>商品介绍：{{item.info}}</p>
                    <button @click="goDetail(item.id)">查看详情</button>
                </dd>
            </dl>
        </div>
   </div>
</template>
<script>

export default {
    props:["list"],
    name:"list",
    methods:{
          goDetail(e){
            let id = e
            id = JSON.stringify(id)
            this.$router.push({
                name:'GeneralIntegralDetail',
                params:{
                    id:e
                }
            })
        },

    }
}
</script>

<style lang="scss" scoped>
 .func-button-group {
        display: flex;
        padding: 1rem 0.2rem 1rem;

        dl {
            flex: 1;
            margin: 0.8rem;
            border: 0.1rem solid rgba(225, 228, 233, .3);
            border-radius: 0.5rem;
            box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);

            padding: 1rem;
            display: flex;
            align-items: center;

            dt {
                flex: 0 0 30%;

                img {
                    width: 100%;
                    vertical-align: bottom;
                }
            }

            dd {
                flex: 1;
                padding-left: 1rem;

                p {
                    margin: 0rem;
                    padding: 0rem;
                }
                p:first-child {
                    margin-bottom: 0.5rem;
                    color: #333333;
                    font-size: 1.4rem;
                }
                p:last-child {
                    margin-bottom: 0.15rem;
                    color: #999999;
                    font-size: 1.1rem;
                }
            }
        }
    }
 .clearfix:after {
    content: "";
    clear: both;
    visibility: hidden;
    display: block;
}

.shop_box{
    // display: flex;
    padding: 1rem 0.2rem 1rem;
    min-width:1550px;
    dl{
        width: 47%;
        float: left;
        margin: 0.8rem;
        border: 0.1rem solid rgba(225, 228, 233, .3);
        border-radius: 0.5rem;
        box-shadow: 2px 2px 5px rgba(0, 0, 0, .3);
        padding: 1rem; 
        dt{
            img{
                // display: inline-block;
                float: left;
                width:20rem;
                height: 20rem;
            }
        }
        dd{
            float: left;
            margin-left: 5rem;
            p{
                color: rgb(0,205,0) ;
                padding: 2rem 0;
            }
            button{
                border: none;
                background:rgb(0,205,0) ;
                color:white;
                border-radius: 0.2rem;
                width: 10rem;
                line-height: 4rem;
                border-radius: 2rem;
            }
        }
    }
}


</style>

